<template>
  <div class="fault-library-contain-top">
    <div class="title">{{ $t('common.form.type.faultLibrary') }}</div>
    <div class="operate">
      <template v-if="viewValue === 0">

        <span 
          class="btn-text" 
          style="margin-right:16px;"
          @click="$emit('expandAll',false)"
        >
          <i class="iconfont icon-fold"></i>{{ $t('common.base.foldAll') }}
        </span>

        <span 
          class="btn-text" 
          style="margin-right:32px;"
          @click="$emit('expandAll',true)"
        >
          <i class="iconfont icon-expand"></i>{{ $t('common.base.expandAll') }}
        </span>

        <span class="btn-text">{{ $t('common.base.defaultExpand') }}:
          <el-popover
            placement="bottom"
            width="200"
            trigger="click"
            popper-class="operate-level"
            @show="levelPopoverShow = true"
            @hide="levelPopoverShow = false">
                            
            <div 
              :class="['label',levelValue === item.value ? 'select' : '']"
              v-for="(item,index) in levelList"
              :key="index"
              @click="levelClick(item)"
            >
              {{ item.name }}
              <span v-if="levelValue === item.value" class="iconfont icon-duihao1"></span>
            </div>
            <span class="btn-text" slot="reference">
              {{ levelList[levelValue].name }}<i :class="['iconfont', 'icon-Icon_up', levelPopoverShow ? 'rotation-icon' : '']"></i>
            </span>
          </el-popover>
        </span>
      </template>

      <span v-else class="btn-text">{{ $t('component.viewportDropdown.canvas') }}: 
        <el-popover
          placement="bottom"
          width="200"
          trigger="click"
          popper-class="operate-level"
          @show="canvasPopoverShow = true"
          @hide="canvasPopoverShow = false">
													
          <div 
            :class="['label',currZoomValue === item.value ? 'select' : '']"
            v-for="(item,index) in canvasListData"
            :key="index"
            @click="canvasClick(item)"
          >
            {{ item.name }}
            <span v-if="currZoomValue === item.value" class="iconfont icon-duihao1"></span>
          </div>
          <span class="btn-text" slot="reference">
            {{ canvasName }}<i :class="['iconfont', 'icon-Icon_up', canvasPopoverShow ? 'rotation-icon' : '']"></i>
          </span>
        </el-popover>
      </span>
      <span class="btn-text">{{ $t('component.viewportDropdown.title') }}: 
        <el-popover
          placement="bottom"
          width="200"
          trigger="click"
          popper-class="operate-level"
          @show="viewPopoverShow = true"
          @hide="viewPopoverShow = false">
          <div 
            :class="['label',viewValue === item.value ? 'select' : '']"
            v-for="(item,index) in viewList"
            :key="index"
            @click="viewClick(item)"
          >
            {{ item.name }}
            <span v-if="viewValue === item.value" class="iconfont icon-duihao1"></span>
          </div>
          <span class="btn-text" slot="reference">
            {{ viewList[viewValue].name }}<i :class="['iconfont', 'icon-Icon_up', viewPopoverShow ? 'rotation-icon' : '']"></i>
          </span>
        </el-popover>
      </span>
    </div>
  </div>
</template>

<script>

// api
import { 
  getLevel, // 获取故障树层级
} from '@src/api/Fault';

import { t } from '@src/locales'
export default{
  name:'ListHeader',
  props: {
    currZoomValue: {
      type: String,
      default: '1'
    }
  },
  
  data(){
    return {
      levelPopoverShow:false,
      viewPopoverShow:false,
      canvasPopoverShow:false,
      levelValue: 0,
      levelList: [{
        name: t('component.viewportDropdown.allLevel'),
        value: 0
      }],

      viewValue: 0,
      viewList: [{
        name: t('common.base.list'),
        value: 0
      }, {
        name: t('component.viewportDropdown.mindMap'),
        value: 1
      }],

      // canvasValue: this.currZoomValue || '1',
      // canvasName:'100%',
      canvasList: [{
        name: '100%',
        value: '1',
      }, {
        name: '75%',
        value: '0.75',
      }, {
        name: '50%',
        value: '0.5',
      }, {
        name: '25%',
        value: '0.25',
      }, {
        name: '适应画布',
        value: '',
      }]
    }
  },

  mounted(){
    // this.setLevel()
  },
  computed: {
    canvasListData() {
      const isExist = this.canvasList.find(v => v.value === this.currZoomValue)
      return isExist ? this.canvasList : [{
        name: `${Math.round(this.currZoomValue * 100)}%`,
        value: this.currZoomValue,
      }, ...this.canvasList]
    },
    canvasName() {
      return this.canvasListData.find(v => v.value === this.currZoomValue)?.name
    }
  },

  methods: {
    // 有供父组件使用
    async setLevel(params){
      const { status, data } = await getLevel(params);

      if(status === 0 ){
        if((this.levelList.length - 1) !== data) {
          const list = new Array(data).fill(1).map((v, i) => ({
            name: this.$t('common.base.level', {data1:i + 1}),
            value: i + 1
          }))
          this.levelList = [this.levelList[0], ...list]
          if(this.levelValue > list.length) {
            this.levelValue = list.length
          }
        }
      }
    },

    levelClick(item){
      this.levelValue = item.value;
      this.$emit('expand', this.levelValue)
    },

    viewClick(item){
      this.viewValue = item.value;
      this.$emit('viewChange', this.viewValue)
    },

    canvasClick(item){
      // this.canvasValue = item.value;
      // this.canvasName = item.name;
      this.$emit('canvasChange', item.value)
    }
  }
}
</script>
  
<style lang="scss" scoped>
.fault-library-contain-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	align-self: stretch;
	background: #F5F8FA;
	font-size: 14px;
	line-height: 22px;
  height:40px;
	letter-spacing: 0px;
	color: #595959;
	.title{
	}
	.operate{
		display: flex;
		align-items: center;
			
	}
	.btn-text{
		cursor: pointer;
		color:#8C8C8C;
		.iconfont{
			margin-right:4px;
			color:#262626;
		}
		.icon-Icon_up{
			padding:0 4px;
			margin-right:18px;
			transition:all 0.3s;
			display:inline-block;
			transform:rotate(180deg);
		}
		.rotation-icon{
			transform:rotate(0deg);
		}
	}
}
</style>
<style lang="scss">
  .operate-level{
    max-height: 300px;
    overflow: auto;
		.label{
			font-size: 14px;
			line-height: 22px;
			color: #595959;
			padding: 5px 12px;
			cursor: pointer;
      display: flex;
      justify-content: space-between;
			&.select{
				background: #F5F7FA;
			}
      .icon-duihao1{
        color:$color-primary-light-6;
      }
		}
  }
</style>